<template>
  <div class="fill">
    <h3 class="requireh3" @click="look()">产品基本信息</h3>
    <m-form
      ref="form1"
      :model.sync="mydata"
      :rules="productRules"
      label-width="105px"
      label-position="right"
    >
      <m-form-item prop="goods_info" label="产品信息：">
        <div class="input-wrap">
          <m-input
            class="all-input"
            v-model="mydata.goods_info"
            maxlength="20"
            placeholder="请输入不超过20字的产品名称"
          />
        </div>
      </m-form-item>
      <m-form-item prop="goods_type" label="产品类型：">
        <radio-group v-model="mydata.goods_type">
          <m-radio label="1">包装材料</m-radio>
          <m-radio label="0">配套服务</m-radio>
        </radio-group>
      </m-form-item>
      <m-form-item required label="产品分类：" v-if="type == 'edit' && !isEdit">
        <div class="input-wrap" v-if="mydata.class1">
          <div class="showSelect">{{ mydata.class1 && mydata.class1.cate_name }}</div>
          <div class="showSelect">{{ mydata.class2 && mydata.class2.cate_name }}</div>
          <div class="editSelectBtn" @click="showEdit">编辑</div>
        </div>
      </m-form-item>
      <m-form-item required label="产品分类：" v-if="type != 'edit' || isEdit">
        <div class="input-wrap">
          <m-form-item prop="goods_class_1" style="margin-right: 15px">
            <m-select
              :options="proCategory1"
              v-model="mydata.goods_class_1"
              type="grey"
            />
          </m-form-item>
          <m-form-item prop="goods_class_2">
            <m-select
              :options="proCategory2"
              v-model="mydata.goods_class_2"
              type="grey"
            />
          </m-form-item>
        </div>
      </m-form-item>

      <m-form-item required label="产品数量：">
        <div class="input-wrap">
          <m-form-item prop="goods_num" style="margin-right: 15px">
            <m-input
              v-model="mydata.goods_num"
              placeholder="请输入产品数量"
              style="width: 217px"
              type="number"
            />
          </m-form-item>
          <m-form-item prop="goods_unit">
            <m-select
              :options="productQuantityOptions"
              v-model="mydata.goods_unit"
              type="grey"
            />
          </m-form-item>
        </div>
      </m-form-item>

      <m-form-item required label="期望单价：">
        <div class="input-wrap">
          <m-form-item prop="goods_price" style="margin-right: 15px">
            <m-input
              v-model="mydata.goods_price"
              placeholder="请输入期望单价"
              style="width: 217px"
              type="number"
            />
          </m-form-item>
          <m-form-item prop="currency">
            <m-select
              :options="unitPriceOptions"
              v-model="mydata.currency"
              type="grey"
            />
          </m-form-item>
        </div>
      </m-form-item>

      <m-form-item prop="goods_condition" label="贸易条件：">
        <div class="input-wrap">
          <m-input
            type="textarea"
            class="all-input"
            :autosize="{ minRows: 8 }"
            maxlength="1000"
            show-word-limit
            v-model="mydata.goods_condition"
            placeholder="请输入您具体的产品需求，有助供应商及时给您提供准确的报价方案"
          />
        </div>
      </m-form-item>

      <m-form-item label="产品图片：" style="min-height: 170px">
        <div class="picList" v-if="type === 'edit' && !picEdit">
          <div
            class="picItem"
            v-for="(item, index) in mydata.img_list"
            :key="index"
          >
            <img :src="item" class="objectCover" alt="" />
          </div>
        </div>
        <div
          class="editSelectBtn mtp20"
          @click="showpicEdit"
          v-if="type === 'edit' && !picEdit"
        >
          更换
        </div>
        <m-upload
          @picList="proPicList"
          :limit="5"
          action="#"
          tip="请上传不超过5张、大小在1M以下的图片，限制格式为PNG、JPG"
          v-if="type === 'add' || picEdit"
        >
          <img src="~/assets/images/upload.png" alt="" class="upload-icon" />
        </m-upload>
      </m-form-item>

      <m-form-item label="产品附件：" style="min-height: 170px">
        <div class="picList" v-if="type === 'edit' && !fileEdit">
          <div
            class="nameItem"
            v-for="(item, index) in mydata.file_list"
            :key="index"
          >
            {{ item }}
          </div>
        </div>
        <div
          class="editSelectBtn mtp20"
          @click="showfileEdit"
          v-if="type === 'edit' && !fileEdit"
        >
          更换
        </div>

        <m-upload
          @fileList="proFileList"
          action="#"
          list-type="text"
          :limit="1"
          tip="上传1个产品附件，文件大小限制10M以下，限制格式为PNG、JPG、WORD、PDF、ZIP。"
          v-if="type === 'add' || fileEdit"
        >
          <img src="~/assets/images/add.png" alt="" class="upload-icon" />
        </m-upload>
      </m-form-item>
    </m-form>

    <div class="line"></div>
    <h3 class="requireh3">配送与支付</h3>
    <m-form
      ref="form2"
      :model.sync="mydata"
      :rules="transportRules"
      label-width="105px"
      label-position="right"
    >
      <m-form-item prop="transport_type" label="运输方式：">
        <m-select
          :options="transportOptions"
          v-model="mydata.transport_type"
          type="grey"
        />
      </m-form-item>

      <m-form-item prop="country_type" label="运输地区：">
        <radio-group v-model="mydata.country_type">
          <m-radio label="1">中国大陆</m-radio>
          <m-radio label="0">中国港澳台及海外</m-radio>
        </radio-group>
      </m-form-item>

      <m-form-item required label="目的地：" v-if="1">
        <div class="input-wrap">
          <m-form-item>
            <v-distpicker
              class="addressChoose"
              @province="onChangeProvince"
              @city="onChangeCity"
              @area="onChangeArea"
              :province="mydata.province"
              :city="mydata.city"
              :area="mydata.area"
            ></v-distpicker>
          </m-form-item>
        </div>
      </m-form-item>

      <m-form-item required label="目的地：" v-if="0">
        <div class="input-wrap">
          <m-form-item prop="state" style="margin-right: 15px">
            <m-select
              :options="destinationOptions2.state"
              v-model="mydata.state"
              type="grey"
              placeholder="其他地区/国家"
            />
          </m-form-item>
          <m-form-item prop="city">
            <m-select
              :options="destinationOptions2.city"
              v-model="mydata.city"
              type="grey"
              placeholder="市"
            />
          </m-form-item>
        </div>
        <div class="input-wrap">
          <m-form-item>
            <m-checkbox v-model="mydata.useDefault">使用我的默认地址</m-checkbox>
          </m-form-item>
        </div>
      </m-form-item>

      <m-form-item prop="address" required label="详情地址：">
        <div class="input-wrap">
          <m-input
            v-model="mydata.address"
            style="width: 681px; display: inline-block"
            placeholder="请输入详细地址"
          />
        </div>
      </m-form-item>

      <m-form-item prop="days" required label="期望交期：">
        <div class="input-wrap">
          <m-input
            v-model="mydata.days"
            placeholder="请输入期望交期"
            style="width: 217px; display: inline-block; margin-right: 15px"
          />
          天
        </div>
      </m-form-item>

      <m-form-item required prop="pay_type" label="支付方式：">
        <m-select
          :options="paymentOptions"
          v-model="mydata.pay_type"
          type="grey"
        />
      </m-form-item>

      <m-form-item prop="remarks" required label="备注：">
        <div class="input-wrap">
          <m-input
            type="textarea"
            class="all-input"
            :autosize="{ minRows: 4 }"
            maxlength="100"
            show-word-limit
            v-model="mydata.remarks"
          />
        </div>
      </m-form-item>
      <div class="line"></div>
      <h3 class="requireh3">报价截止日期</h3>
      <m-form-item prop="end_time" required class="dateSelect">
        <div class="select-date">
          <p>请选择询盘报价截止日期</p>
          <m-date-picker v-model="mydata.end_time" placeholder="请选择截止日期"/>
        </div>
      </m-form-item>
    </m-form>
  </div>
</template>

<script>
import { RadioGroup } from "element-ui";
import { number, price, selectverification } from "@/utils/validates";
import MForm from "@/components/common/m-form/MForm";
import MFormItem from "@/components/common/m-form/MFormItem";
import MInput from "@/components/common/m-input/MInput";
import MRadio from "@/components/common/m-radio/MRadio";
import MSelect from "@/components/common/m-select/MSelect";
import MUpload from "../../../components/common/m-upload/MUpload";
import MCheckbox from "@/components/common/m-checkbox/MCheckbox";
import MDatePicker from "@/components/common/m-date-picker/MDatePicker";
import { getProductsCategory } from "@/request/api";

export default {
  name: "Requirement1",
  props: {
    type: String,
    mydata: {
      type: Object
    }
  },
  components: {
    MDatePicker,
    MCheckbox,
    MUpload,
    MSelect,
    MRadio,
    MInput,
    MFormItem,
    MForm,
    RadioGroup
  },
  data() {
    return {
      isEdit: false,
      picEdit: false,
      fileEdit: false,
      productRules: {
        goods_info: [
          { required: true, message: "请输入完整", trigger: "blur" }
        ],
        goods_type: [
          { required: true, message: "请输入完整", trigger: "blur" }
        ],
        goods_class_1: [
          {
            validator: selectverification,
            required: true,
            trigger: ["change", "blur"]
          }
        ],
        goods_num: [{ validator: number, trigger: "blur", required: true }],
        goods_unit: [
          {
            validator: selectverification,
            trigger: ["change", "blur"],
            required: true
          }
        ],
        goods_price: [{ validator: price, trigger: "blur", required: true }],
        currency: [
          {
            validator: selectverification,
            trigger: ["change", "blur"],
            required: true
          }
        ],
        goods_condition: [
          { required: true, message: "请输入完整", trigger: "blur" }
        ]
      },
      transportRules: {
        transport_type: [
          {
            validator: selectverification,
            trigger: ["change", "blur"],
            required: true
          }
        ],
        country_type: [
          { required: true, message: "请输入完整", trigger: "blur" }
        ],
        province: [
          {
            validator: selectverification,
            trigger: ["change", "blur"],
            required: true
          }
        ],
        city: [
          {
            validator: selectverification,
            trigger: ["change", "blur"],
            required: true
          }
        ],
        area: [{ required: true, message: "请输入完整", trigger: "blur" }],
        address: [{ required: true, message: "请输入完整", trigger: "blur" }],
        days: [{ validator: number, required: true, trigger: "blur" }],
        pay_type: [
          {
            validator: selectverification,
            trigger: ["change", "blur"],
            required: true
          }
        ],
        remarks: [{ required: true, message: "请输入完整", trigger: "blur" }],
        end_time: [{ required: true, message: "请选择日期", trigger: "blur" }]
      },
      proCategory1: [],
      proCategory2: [],
      productQuantityOptions: [
        { label: "个", value: "0" },
        { label: "件", value: "1" },
        { label: "pcs", value: "2" }
      ],
      unitPriceOptions: [{ label: "人民币", value: "0" }],
      transportOptions: [
        { label: "空运", value: "0" },
        { label: "海运", value: "1" },
        { label: "陆运", value: "2" }
      ],
      destinationOptions2: {
        state: [{ label: "中国香港", value: "hk" }],
        city: [{ label: "香港岛", value: "hongkongisland" }]
      },
      paymentOptions: [
        { label: "线上支付", value: "0" },
        { label: "线下支付", value: "1" }
      ]
    };
  },
  created() {
    this.getProCategory();
  },
  methods: {
    showEdit() {
      this.isEdit = true;
      this.getProCategory();
    },
    showpicEdit() {
      this.picEdit = true;
    },
    showfileEdit() {
      this.fileEdit = true;
    },
    onChangeProvince(e) {
      this.mydata.province = e.value;
    },
    onChangeCity(e) {
      this.mydata.city = e.value;
    },
    onChangeArea(e) {
      this.mydata.area = e.value;
    },
    proPicList(list) {
      this.mydata.img_list = list;
    },
    proFileList(list) {
      this.mydata.file_list = list;
    },
    getProCategory(id) {
      if (this.type === "edit" && !this.isEdit) return false;
      let that = this;
      id = id || 0;
      let data = {
        is_entity: this.mydata.goods_type,
        page: 1,
        limit: 0,
        pid: id,
        num: 0
      };
      getProductsCategory(data).then(res => {
        let i;
        if (id === 0) {
          that.proCategory1 = [];
          for (i in res.data.data) {
            let tem = {
              label: res.data.data[i].cate_name,
              value: res.data.data[i].id
            };
            that.proCategory1.push(tem);
          }
        } else {
          that.proCategory2 = [];
          for (i in res.data.data) {
            let tem = {
              label: res.data.data[i].cate_name,
              value: res.data.data[i].id
            };
            that.proCategory2.push(tem);
          }
        }
      });
    },
    look() {
      this.$refs.form1.$refs.mForm.validate(res => {
        if (res) {
          this.$refs.form2.$refs.mForm.validate(res2 => {
            if (res2) {
              this.$parent.active = 1;
              this.$router.push({ path: "/require/2" });
            }
          });
        }
      });
    },
    findLabel(list, val) {
      let obj = {};
      obj = list.find(item => {
        return item.value == val;
      });
      return obj.label;
    }
  },
  watch: {
    "mydata.goods_class_1": {
      handler: function(val) {
        if (this.type == "edit" && !this.isEdit) {
          return false;
        } else {
          if (val) {
            this.mydata.goods_class_1_txt = this.findLabel(
              this.proCategory1,
              val
            );
          }
          this.mydata.goods_class_2 = "";
          this.getProCategory(this.mydata.goods_class_1);
        }
      }
    },
    "mydata.goods_class_2": {
      handler: function(val) {
        if (this.type == "edit" && !this.isEdit) {
          return false;
        } else {
          if (val) {
            this.mydata.goods_class_2_txt = this.findLabel(
              this.proCategory2,
              val
            );
          }
        }
      }
    },
    "mydata.goods_type": {
      handler: function() {
        this.mydata.goods_class_1 = "";
        this.mydata.goods_class_1_txt = "";
        this.mydata.goods_class_2 = "";
        this.mydata.goods_class_2_txt = "";
        this.getProCategory();
      }
    },
    "mydata.goods_unit": {
      handler: function(val) {
        if (val) {
          this.mydata.goods_unit_txt = this.findLabel(
            this.productQuantityOptions,
            val
          );
        }
      }
    },
    /* "mydata.transport_type": {
      handler: function(val) {
        if (val) {
          this.mydata.transport_type_txt = this.findLabel(
            this.transportOptions,
            val
          );
        }
      }
    } */
  }
};
</script>
<style lang="scss" scoped>
.all-input {
  width: 745px;
  display: inline-block;
}

/deep/ .dateSelect .el-form-item__content {
  margin-left: 0 !important;
}

/deep/ .distpicker-address-wrapper select {
  width: 217px;
  height: 45px;
  background-color: #f3f4f6;
  border: solid 1px #eaeaea;
  border-radius: 10px;
  margin-right: 10px;
  position: relative;
}

.input-wrap {
  width: 900px;
  display: flex;
}

.line {
  height: 1px;
  background: #e9e9e9;
  margin: 10px 0 58px;
}

.bottom {
  margin-bottom: 120px;
}

.bottom60 {
  margin-bottom: 60px;
}

.select-date p {
  margin-bottom: 22px;
}

.showSelect {
  border: 1px solid #dcdfe6;
  width: 200px;
  height: 45px;
  line-height: 45px;
  padding: 0 20px;
  margin-right: 15px;
  background-color: #f3f4f8;
  border-radius: 10px;
  border-color: #e9e9e9;
}

.editSelectBtn {
  background: rgb(228, 139, 44);
  color: rgb(255, 255, 255);
  border-radius: 10px;
  cursor: pointer;
  font-size: 14px;
  text-align: center;
  width: 90px;
  height: 45px;
  line-height: 45px;
}

.picList {
  display: flex;

  .picItem {
    width: 160px;
    height: 160px;
    margin-right: 10px;
    overflow: hidden;
    border: 1px solid #eee;
    border-radius: 10px;
  }
}
</style>
